<!-- 登录 -->
<template>
  <div>
    <div class='login-container'>
      <div style="width: 1200px;margin: auto;" class="flex align-center justify-between">
        <div>
          <!-- <img style="height: 60px;margin-right: 5px;vertical-align: middle;" src="../../assets/login/logo.jpg" alt="" class="hover" @click="$router.push(`/home`);"> -->
          <span style="vertical-align: middle;font-size: 22px;padding-left: 14px;border-left: 1px solid #888;">陕西鼎航供应链科技有限公司</span>
        </div>

        <div>
          <span>暂无账号，点此</span>
          &nbsp;
          <span style="color:#027AFF;" class="hover" @click="doRegist">注册</span>
        </div>
      </div>

      <div class="img">
        <div class="in">
          <h3 class="title">欢迎登录</h3>

          <el-form :model="form" class="login-form" label-position="left">
            <el-form-item prop="username">
              <div class="flex align-center item-content">
                <i class="iconfont iconwo"></i>
                <el-input ref="username" v-model="form.username" placeholder="请输入用户名" name="username" type="text" tabindex="1" />
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="flex align-center item-content">
                <i class="iconfont iconmima"></i>
                <el-input :key="passwordType" ref="password" v-model="form.password" :type="passwordType" placeholder="请输入密码" name="password" tabindex="2" @keyup.enter.native="handleLogin" />
                <i class="iconfont" @click="showPwd" :class="passwordType === 'password' ? 'iconicon_biyan2x' : 'iconchakanyan'"></i>
              </div>
            </el-form-item>

            <div style="text-align: right;margin-bottom: 10px;" class="hover">
              <span @click="find">忘记密码</span>
            </div>

            <el-button class="button" :loading="loading" type="primary" @click.native.prevent="handleLogin">登录
            </el-button>
          </el-form>
          <div class="login_wxcodee">
            <p>扫一扫关注我们</p>
            <!-- <img src="../../assets/login/QR.jpg" style="width: 90px;" alt=""> -->
          </div>
        </div>
      </div>

      <div style="text-align: center;padding: 60px 0 10px 0;">
        <p style="font-size: 14px;margin: 0;">版权所有：陕西鼎航供应链科技有限公司</p>
        <br>
        <span style="font-size: 14px;">
          <a target="_blank" href="https://beian.miit.gov.cn/" style="text-decoration:none;">陕ICP备19026100号</a>
          Copyright © 2020 鼎航科技
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "admin",
        password: "ssd2021S",
      },
      loading: false,
      passwordType: "password",
      redirect: ''
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 去注册
    doRegist() {
      this.$router.push({
        name: "/signIn",
      });

      // window.open("http://dtmy.dhgylian.com/", "_blank");
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    async handleLogin() {
      this.loading = true;
      const data = await this.$http.post('/login', this.form)
      this.setToken(data)

      this.loading = false
      this.$router.push({ path: this.redirect || '/' }).catch(() =>{})
      // const { arr, button } = await this.$http.get('/sys/menu/lists')



      // this.$refs.loginForm.validate((valid) => {
      //   if (valid) {
      //     this.loading = true;
      //     const { username, password } = this.loginForm;
      //     this.$http.post('/login', {
      //       username: username,
      //       password: password,
      //     })
      //       .then((data) => {
      //         // 保存token
      //         this.$store.dispatch("user/login", data);
      //         // 清空缓存的tagsView
      //         this.$store.commit('tagsView/clean')

      //         // 判断去往位置
      //         let router = this.$route.query.to;

      //         if (router) {
      //           let [to, query] = router.split("?");
      //           log(to, query);
      //           this.$router.push({
      //             name: to,
      //             query: query ? JSON.parse(query) : void 0,
      //           });
      //         } else {
      //           this.$router.push({ path: this.redirect || "/" });
      //         }

      //         this.loading = false;
      //       })
      //       .catch((e) => {
      //         this.loading = false;
      //       });
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    find() {
      this.$router.push({
        name: '/find',
        // query: this.loginForm.username ? {username: this.loginForm.username}: void 0,
      });
    }
  },
};
</script>
<style lang='scss'>
.login-container {
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 1200px;
  display: grid;
  grid-template-rows: minmax(100px, 1fr) 687px minmax(88px, 1fr);
  grid-template-columns: 100%;

  .img {
    background-size: cover;
    position: relative;

    .in {
      position: absolute;
      width: 400px;
      height: 500px;
      padding: 10px 0 20px 0;
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
      right: 12%;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 10px;

      .title {
        font-size: 24px;
        color: #efc938;
        margin: 40px auto 40px auto;
        text-align: center;
      }

      .button {
        border: none;
        display: block;
        margin: 0 auto 30px;
        color: #fff;
        font-size: 18px;
        width: 100%;
        height: 40px;
        background: #efc938;
        border-radius: 6px;
      }

      .login_wxcodee {
        text-align: center;
        font-size: 14px;
        color: #888;
      }

      .login-form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
        margin: auto;

        .item-content {
          background: #f6f6f6;
          padding: 0 15px;
          border-radius: 5px;
        }

        input {
          background: none;
          border: none;
        }

        .iconfont {
          font-size: 20px;
          color: #888888;
        }

        .login-btn {
          border-radius: 5px;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>